<!-- 添加推广链接 -->
<!-- 添加推广链接 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" alignCenter width="840px" title="价格模板" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
      <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; min-height: 420px; padding: 0 20px"></base-skeleton>
      <template v-else-if="pageLoad.loadState === false && formData.dramaFirstTemplate">
        <div v-auto-animate style="width: 100%">
          <div style="padding-bottom: 10px">
            <span>支付模版</span>
          </div>
          <div class="content-vessel">
            <div class="content-box" @click="handleSelectTemplate('dramaFirstTemplate', 4)">
              <page-simulation-template
                :selectIndex="formData.dramaFirstTemplate.selectIndex"
                :templateProductList="formData.dramaFirstTemplate.productList"
              ></page-simulation-template>
              <div class="title-box">
                <h3>短剧解锁</h3>
                <el-tag type="success">视频播放页</el-tag>
                <el-button link :icon="IconPointer" type="primary">重选</el-button>
              </div>
            </div>
          </div>
          <div style="padding-bottom: 10px; margin-top: 20px">
            <span>回传模版</span>
          </div>
          <bubble-select-local
            :key="formData.dramaFirstTemplate.productTemplateId"
            :modelValue="backTemplate"
            labelKey="backTemplateName"
            valueKey="productBackTemplateId"
            :filterable="false"
            returnOriginal
            style="width: 100%"
            :param="{ productTemplateId: formData.dramaFirstTemplate.productTemplateId }"
            :axios="getAllBackTemplateListAxios"
            placeholder="请选择回传模版"
            @change="backTemplateChange"
          ></bubble-select-local>
          <el-button type="success" style="width: 100%; margin-top: 40px" :loading="loading" :disabled="loading" @click="submit">提交</el-button>
        </div>
      </template>
      <base-empty
        v-else
        style="height: 100%"
        :description="pageLoad.description || ''"
        :imageSize="240"
        :loadState="pageLoad.loadState"
        :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
      ></base-empty>
    </el-dialog>
    <page-select-template ref="pageSelectTemplateRef"></page-select-template>
  </div>
</template>

<script setup lang="ts">
  import IconPointer from '~icons/ep/pointer';
  import { vAutoAnimate } from '@formkit/auto-animate/vue';
  import {
    type AllLinkTemplateInfo,
    type BaseBackTemplate,
    type LinkTemplateType,
    type ReferralTemplate,
    type SaveProductTemplateRequest,
    getAllBackTemplateListAxios,
    gitLinkTemplateAxios,
    saveProductTemplateAxios,
  } from '@/api/marketing-management';
  import PageSelectTemplate from '@/components/page/page-select-template/page-select-template.vue';

  type $ShowData = {
    /** 推广链接id  */
    referralLinkId: number;
    callBack: () => void;
  };

  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });
  const dialogVisible = ref(false);
  const referralLinkId = ref(1);
  const pageSelectTemplateRef: Ref<InstanceType<typeof PageSelectTemplate> | null> = ref(null);
  const loading = ref(false);
  let callBack: $ShowData['callBack'] | undefined = undefined;
  const backTemplate = ref<BaseBackTemplate | undefined>();
  const formData = ref<AllLinkTemplateInfo>({
    backTemplateName: '',
    productTemplateName: '',
    referralLinkId: referralLinkId.value,
    dramaFirstTemplate: undefined,
    productBackTemplateId: undefined,
  });

  /**
   * 选择模板
   * @param type - 类型
   */
  function handleSelectTemplate(key: LinkTemplateType, templateType: 1 | 2 | 4) {
    pageSelectTemplateRef.value?.show({
      templateType,
      selectCallBack(res: ReferralTemplate) {
        formData.value![key] = res;
        formData.value.productBackTemplateId = undefined;
      },
    });
  }

  /** 监听选择回传模版改变 */
  function backTemplateChange(data: BaseBackTemplate) {
    backTemplate.value = data;
    formData.value.productBackTemplateId = data.productBackTemplateId;
  }

  /**
   * 提交
   */
  async function submit() {
    try {
      loading.value = true;
      const data: SaveProductTemplateRequest = {
        productBackTemplateId: formData.value.productBackTemplateId,
        referralLinkId: referralLinkId.value,
        templateInfoList: [{ isFirstRecharge: 0, productTemplateId: formData.value!.dramaFirstTemplate!.productTemplateId!, templateType: 4 }],
      };
      data.templateInfoList = data.templateInfoList.filter((item) => item.productTemplateId);
      await saveProductTemplateAxios(data);
      typeof callBack === 'function' && callBack();
      loading.value = false;
      ElToast.success('提交成功');
      hide();
    } catch (error) {
      loading.value = false;
      ElToast.error(error.msg || '提交失败，-BD001');
    }
  }

  /** 请求 */
  async function getBaseDataAxios() {
    try {
      pageLoad.loadState = true;
      const res = await gitLinkTemplateAxios(referralLinkId.value);
      formData.value = {
        backTemplateName: res.data.backTemplateName || '',
        productTemplateName: res.data.productTemplateName || '',
        referralLinkId: res.data.referralLinkId,
        dramaFirstTemplate: res.data.dramaFirstTemplate || undefined,
        productBackTemplateId: res.data.productBackTemplateId || undefined,
      };
      backTemplate.value = res.data.productBackTemplateId
        ? { productBackTemplateId: res.data.productBackTemplateId, backTemplateName: res.data.backTemplateName }
        : undefined;

      pageLoad.loadState = false;
    } catch (error) {
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    callBack = data.callBack;
    referralLinkId.value = data.referralLinkId;
    formData.value.productBackTemplateId = undefined;
    dialogVisible.value = true;
    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>

<style scoped lang="scss">
  .content-vessel {
    display: grid;
    grid-template-columns: repeat(auto-fill, 259px);
    gap: 15px;
    place-content: center;
    width: 100%;
    padding-bottom: 20px;

    .content-box {
      overflow: hidden;
      cursor: pointer;
      background: $c-bg-block;
      border-radius: 10px;
      box-shadow: var(--my-box-shadow-fill);

      .title-box {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
      }
    }
  }
</style>
